import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  ref,
  watch,
  defineExpose,
  reactive,
} from "vue";

const IpInfo = defineComponent({
  name: "IpInfo",
  props: {
    data: {
      type: Object as PropType<TIpCard>,
      required: false,
    },
  },
  emits: ["abort"],

  setup(props, { attrs, emit, expose }) {
    // const data = computed(() => props.data);
    // const data = ref({ ...props.data });

    const data = reactive({
      ip: {
        id: "",
        ip: "",
        name: "",
        mac: "",
        location: "",
        ttl: 0,
        domain: "",
        cpe: "",
        enable: false,
        status: false,
        roundtripTime: 0,
        url: "",
      },
    });

    const isShow = ref(false);
    const info = ref();

    const openIpInfoPanel = (d: TIpCard) => {
      data.ip = d;
    };

    const abortModify = () => {
      emit("abort");
    };

    const submitModify = () => {
      console.log(data.ip);
    };

    onMounted(() => {});

    defineExpose({
      openIpInfoPanel,
    });


    return () => (
      <>

        <div class="w-72 h-auto bg-sky-100 rounded-md m-2 flex flex-col px-2 text-black ">
          <div class="my-2">IP信息修改</div>

          <div>
            <label class="input input-bordered flex items-center gap-2 input-sm">
              <span>IP地址:</span>
              <input
                type="text"
                class="grow"
                placeholder="Ip地址"
                v-model={data.ip.ip}
              />
            </label>

            <label class="input input-bordered flex items-center gap-2 input-sm">
              <span> 名称 : </span>

              <input
                type="text"
                class="grow"
                placeholder="Name"
                v-model={data.ip.name}
              />
            </label>

            {/* <label class="input input-bordered flex items-center gap-2 input-sm">
              <span> CPE : </span>
              <input
                type="text"
                class="grow"
                placeholder="Cpe"
                v-model={data.value?.cpe}
              />
            </label>

            <label class="input input-bordered flex items-center gap-2 input-sm">
              <span>地址 : </span>
              <input
                type="text"
                class="grow"
                placeholder="地址"
                v-model={data.location}
              />
            </label>

            <label class="input input-bordered flex items-center gap-2 input-sm ">
              <span>启用 : </span>
              <input
                type="checkbox"
                class="checkbox checkbox-sm"
                checked={data.enable}
              />
            </label> */}
          </div>

          <div class="flex flex-row justify-around my-2">
            <button
              class="btn btn-outline btn-info btn-sm"
              onClick={() => submitModify()}
            >
              提交
            </button>
            <button
              class="btn btn-outline btn-info btn-sm"
              onClick={() => abortModify()}
            >
              放弃
            </button>
          </div>
        </div>

      </>
    );
  },
});

export default IpInfo;
